<template>
  <view
    class="Icon class"
    :style="{ fontSize: `${size}px` || '' }"
    @click="iconClickHandler"
  >
    {{ content() }}
  </view>
</template>
<script lang="ts">
import Vue from '@/utils/Vue';
import { PropType } from 'vue';
export default Vue.extend({
  data() {
    return {};
  },
  props: {
    char: String,
    size: {
      type: String,
      required: false,
    },
    onClick: {
      type: Function as PropType<(event: any) => void>,
      required: false,
    },
  },
  methods: {
    content() {
      return unescape(`%u${this.char}`);
    },
    iconClickHandler(event: MouseEvent) {
      if (this.onClick) {
        this.onClick(event);
      }
    },
  },
  options: {
    virtualHost: true,
  },
  externalClasses: ['class'],
});
</script>
<style lang="less">
.Icon {
  font-family: 'iconfont';
}
</style>
